import React, { useEffect, useState } from "react";
import { Tabs, Cell, Image, Button } from "react-vant";
import { ListRawState } from "../../types";
import axios from "axios";
import {  NavLink } from 'react-router-dom'

const Index: React.FC = () => {
  const [tags, setTags] = useState<ListRawState[]>([]);
  const token = localStorage.getItem('token');
  const fetchTags = async () => {
    const resp = await axios.get("/api/tags");
    console.log(resp.data.data);
    setTags(resp.data.data);
  };
  useEffect(() => {
    fetchTags();
  }, []);
  return (
    <div>
      <Tabs>
        <Tabs.TabPane title="全部标签">
          {tags.map((v, i) => {
            return (
              <Cell
                title={v.title}
                key={i}
                label={v.desc}
                icon={
                  <Image
                    src={v.image}
                    width={50}
                    height={50}
                    style={{ borderRadius: "50%" }}
                  ></Image>
                }
              >
                <Button type="primary" round style={{ width: 120 }}>
                  关注
                </Button>
              </Cell>
            );
          })}
        </Tabs.TabPane>
        <Tabs.TabPane title="关注标签">
          {
            token ? <div>   {tags.map((v, i) => {
              return (
                <Cell
                  title={v.title}
                  key={i}
                  label={v.desc}
                  icon={
                    <Image
                      src={v.image}
                      width={50}
                      height={50}
                      style={{ borderRadius: "50%" }}
                    ></Image>
                  }
                >
                  <Button type="primary" round style={{ width: 120 }}>
                    关注
                  </Button>
                </Cell>
              );
            })}</div> : <div>没有登录， 去<NavLink to="/login">登录</NavLink> 吧</div>
          }
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
